﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <link href="../../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="../../../lib/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css" />
    <script src="../../../lib/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../../../lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>
    <script src="../../../lib/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>
    <script src="../../../lib/ligerUI/js/plugins/ligerMenu.js" type="text/javascript"></script>
    <script src="draggable.js" type="text/javascript"></script>
    <script type="text/javascript">
        function getData()
        {
            return [
                { text: '节点1', children: [
                    { text: '节点1.1' },
                    { text: '节点1.2' },
                    { text: '节点1.3', children: [
                         { text: '节点1.3.1' },
                         { text: '节点1.3.2' }
                    ]
                    },
                    { text: '节点1.4' }
                 ]
                },
                { text: '节点2' },
                { text: '节点3' },
                { text: '节点4' }
            ];
        }
        var actionNode;
        function deleteItem()
        {
            if (actionNode)
                t2.remove(actionNode);
        }
        $(function ()
        {
            window['t1'] =
            $("#tree1").ligerTree({
                nodeDraggable: false,
                data: getData()
            });


            var menu = $.ligerMenu({ width: 120, items:
            [
                { text: '删除', click: deleteItem, icon: 'delete' } 
            ]
            });

            window['t2'] =
            $("#tree2").ligerTree({
                nodeDraggable: tree1,
                data: getData(),
                onContextmenu: function (node, e)
                {
                    actionNode = node.data;
                    menu.show({ top: e.pageY, left: e.pageX });
                    return false;
                }
            });


            treeDraggable(t1, t2);

        });
    </script>
</head>
<body style="padding: 10px">
    <div id="message">
    </div>
    <div class="all" style="width: 800px; height: 600px;">
        <div style="width: 300px; height: 400px; margin: 10px; margin-right: 1px; float: left;
            border: 1px solid #ccc; overflow: auto;">
            <ul id="tree1">
            </ul>
        </div>
        <div style="width: 300px; height: 400px; margin: 10px; margin-left: 1px; float: left;
            border: 1px solid #ccc; overflow: auto;">
            <ul id="tree2">
            </ul>
        </div>
    </div>
    <div style="display: none">
    </div>
</body>
</html>
